import React from 'react'
import './szh.css'
import { TabBar } from 'antd-mobile'
import { AppstoreOutline, AppOutline, TruckOutline ,UserOutline } from 'antd-mobile-icons'
import { Outlet, useNavigate } from 'react-router-dom'

export default function Index() {
const navgite = useNavigate()
const tabs = [
    {key:'/index/home',title:"首页",icon:<AppOutline />},
    {key:'/index/cate',title:"分类",icon:<AppstoreOutline />},
    {key:'/index/cart',title:"购物车",icon:<TruckOutline />},
    {key:'/index/my',title:"我的",icon:<UserOutline />},
]
  return (
    <div>
        <Outlet></Outlet>
        <TabBar onChange={val=>{navgite(val)}} style={{backgroundColor:"#fff"}}>
            {tabs.map(i=><TabBar.Item key={i.key} title={i.title} icon={i.icon}></TabBar.Item>)}
        </TabBar>
    </div>
  )
}
